<!--suppress ALL -->
<include file="./Template/header.html" />

<link rel="stylesheet" type="text/css" href="/Template/css/scienceList.css">
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

	$(function() {

		//初始化页面配置
		document.title = "科普列表";

		var app = new Vue({
			el: '#container',
			data: {
				categoryList: [],
			},
			methods: {
				activityList: function(id) {
					window.location.href = "/wechat/activity/index/categoryId/"+id;
				},
				scienceDetail: function(id) {
					window.location.href = "/wechat/science/detail/id/"+id;
				}
			}
		})

		function getScienceList(categoryId) {

			$.ajax({
				url:"/wechat/science/scienceList",
				type:"post",
				data:{
					categoryId: categoryId
				},
				dataType:"JSON",
				beforeSend:function(){
					$("#loadingToast").show();
				},
				complete:function(){
					$('#loadingToast').hide();
				},
				success:function(data){
					app.categoryList = data;
				},
			})
		}
        $(".search-box").change(function() {
            var value = $(this).find("option:selected").text();
            $(this).prev().attr('placeholder',value);
        });


        $("select[name=categoryId]").change(function() {

			var categoryId = $(this).val();

			getScienceList(categoryId);

		});

		getScienceList(0);

	});


</script>

<div class="container" id="container">
	<div class="head-search">
		<span class="disease">病症：</span>
		<img class="icon-arrow" src="/Template/images/icon-arrow.png" alt="">
		<input class="search-line" type="text" placeholder="请选择所对应的症状" readonly>
		<select class="search-box" name="categoryId">
			<option value="0" class="choose">请选择所对应的症状</option>
			{:getCategorySelectOptionHtml(0, 0)}
		</select>
	</div>
	<div class="no-data" v-if="categoryList == null">暂无数据</div>
	<div class="disease-content">
		<div class="disease-classify" v-for="category in categoryList">
			<div class="disease-title">
				<img src="/Template/images/icon-lefthint.png" alt="">
				<span>{{category.category_name}}科普</span>
				<button class="buy-now active" v-if="category.has_activity == true" v-on:click="activityList(category.category_id)">线下活动</button>
				<button class="order active" v-if="category.has_activity == false">暂无活动</button>
			</div>
			<div class="disease-exihibate">
				<ul>
					<li class="item" v-on:click="scienceDetail(science.science_id)" v-for="science in category.science_list">
						<img class="product-pic" src="{{science.title_image}}" alt="">
						<p class="disease-name">{{science.title}}</p>
						<!--p class="teacher-name">{{science.doctor_name}}</p-->
					</li>
				</ul>
			</div>
		</div>
	</div>
</div>
<include file="./Template/footer.html" />

